<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入swiper样式-->
    <link rel="stylesheet" href="../../css/Untils/public.css">
    <title>优惠券列表</title>
    <style>
        .form_style {
            width: 480px;
            height: auto;
            background-color: white;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 8px;
            left: 480px;
            padding: 5px 40px;
        }

        .identity {
            width: 480px;
            height: auto;
            background-color: white;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 240px;
            left: 480px;
            padding: 5px 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="flex_wrap">
            <div class="flex_wrap">
                <h1 style="text-align: center;">优惠券库存表</h1>
                <div class="flex flex_around">
                    <el-button type="primary" @click="submit">发布优惠券</el-button>
                    <el-button type="primary" @click="ServiceBtn">客服中心</el-button>
                    <!-- <el-button type="primary" @click="skipToCustomerServer">客服聊天室</el-button> -->

                    <div>
                        <el-input v-model="condition1" style="width: 160px;margin-right: 20px;" placeholder="请输入优惠券名称">
                        </el-input>
                        <el-input v-model="condition2" style="width: 160px;margin-right: 20px;" placeholder="请输入优惠券编号">
                        </el-input>
                        <el-input v-model="condition3" style="width: 160px;margin-right: 20px;" placeholder="请输入适用方编号">
                        </el-input>
                        <el-button type="success" @click="search">查询优惠券</el-button>
                        <el-button type="success" style="margin-left: 20px;" @click="reset">重置</el-button>
                    </div>
                </div>
                <el-table current-row-key="id" ref="filterTable" :data="tableData" style="width: 100%">
                    <el-table-column prop="stockId" width="80px" label="库存id">
                    </el-table-column>
                    <el-table-column prop="couponNo" width="140px" label="优惠券编号">
                    </el-table-column>
                    <el-table-column prop="couponName" width="80px" label="优惠券">
                    </el-table-column>
                    <el-table-column prop="couponPrice" width="80px" label="优惠价格">
                    </el-table-column>
                    <el-table-column prop="couponFullPrice" width="80px" label="满减价格">
                    </el-table-column>
                    <el-table-column prop="couponDiscount" width="120px" label="折扣">
                    </el-table-column>
                    <el-table-column prop="couponPublish" width="80px" label="发布方">
                    </el-table-column>
                    <el-table-column prop="stock" width="80px" label="库存量">
                    </el-table-column>
                    <el-table-column prop="publishTotal" width="80px" label="发布量">
                    </el-table-column>
                    <el-table-column prop="couponStartDate" width="160px" label="发布日期">
                    </el-table-column>
                    <el-table-column prop="couponEndDate" width="160px" label="有效期">
                    </el-table-column>
                    <el-table-column prop="couponStatusNo" width="120px" label="适用方编号">
                    </el-table-column>
                    <el-table-column prop="" label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="deleteBtn(scope.row)">注销</el-button>
                            <el-button type="warning" disabled size="mini" >编辑</el-button>
                            <!-- <el-button type="warning" size="mini" @click="editBtn(scope.row)">编辑</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div style="text-align: center;margin-top: 20px;">
                <div class="block">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[6, 12, 18, 24]"
                    :page-size="6"
                    layout="total, sizes, prev, pager, next, jumper"
                   
                    :total=couponTotal>
                    
                  </el-pagination>
                </div>
            </div>
        </div>

        <!--选择身份-->
        <div v-if="isShowIdentity">
            <div class="identity flex_wrap">
                <el-select v-model="value" placeholder="请选择身份">
                    <el-option v-for="item in identity" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                    </el-option>
                </el-select>
                <div class="flex flex_around">
                    <el-button type="primary" @click="identitySubmit">确认</el-button>
                </div>
            </div>
        </div>

        <!--添加-->
        <div v-if="isShowAddForm">
            <div class="form_style">
                <el-form ref="form" :model="coupon" label-width="80px">
                    <el-form-item label="酒店编号">
                        <el-input v-model="coupon.couponStatusNo"></el-input>
                    </el-form-item>
                    <el-form-item label="编号">
                        <el-input v-model="coupon.couponNo"></el-input>
                    </el-form-item>
                    <el-form-item label="券种类">
                        <el-input v-model="coupon.couponName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠价格">
                        <el-input v-if="value == '0'" v-model="coupon.couponPrice" :disabled="true"></el-input>
                        <el-input v-if="value == '1'" v-model="coupon.couponPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="满减条件">
                        <el-input v-if="value == '0'" v-model="coupon.couponFullPrice" :disabled="true"></el-input>
                        <el-input v-if="value == '1'" v-model="coupon.couponFullPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="折扣">
                        <el-input v-if="value == '0'" v-model="coupon.couponDiscount"></el-input>
                        <el-input v-if="value == '1'" v-model="coupon.couponDiscount" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="库存量">
                        <el-input v-model="coupon.stock"></el-input>
                    </el-form-item>
                    <el-form-item label="发布量">
                        <el-input v-model="coupon.publishTotal"></el-input>
                    </el-form-item>
                    <el-form-item label="发布日期">
                        <el-col :span="11">
                            <div class="block">
                                <el-date-picker v-model="coupon.couponStartDate" type="datetime" placeholder="选择日期时间">
                                </el-date-picker>
                            </div>
                            <!-- <el-date-picker type="date" placeholder="选择日期" v-model="coupon.couponStartDate"
                                style="width: 100%;">
                            </el-date-picker> -->
                        </el-col>
                    </el-form-item>
                    <el-form-item label="有效期">
                        <div class="block">
                            <el-date-picker v-model="coupon.couponEndDate" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                        <!-- <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="coupon.couponEndDate"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-col> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">发布</el-button>
                        <el-button @click="close" style="margin-left: 120px;">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!--修改-->
        <div v-if="isShowEditForm">
            <div class="form_style">
                <el-form ref="form" :model="coupon" label-width="80px">
                    <el-form-item label="酒店编号">
                        <el-input v-model="coupon.couponStatusNo" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="编号">
                        <el-input v-model="coupon.couponNo"></el-input>
                    </el-form-item>
                    <el-form-item label="券种类">
                        <el-input v-model="coupon.couponName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠价格">
                        <el-input v-if="coupon.couponPublish == '0'" v-model="coupon.couponPrice" :disabled="true">
                        </el-input>
                        <el-input v-if="coupon.couponPublish == '1'" v-model="coupon.couponPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="满减条件">
                        <el-input v-if="coupon.couponPublish == '0'" v-model="coupon.couponFullPrice" :disabled="true">
                        </el-input>
                        <el-input v-if="coupon.couponPublish == '1'" v-model="coupon.couponFullPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="折扣">
                        <el-input v-if="coupon.couponPublish == '0'" v-model="coupon.couponDiscount"></el-input>
                        <el-input v-if="coupon.couponPublish == '1'" v-model="coupon.couponDiscount" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存量">
                        <el-input v-model="coupon.stock"></el-input>
                    </el-form-item>
                    <el-form-item label="发布量">
                        <el-input v-model="coupon.publishTotal"></el-input>
                    </el-form-item>
                    <el-form-item label="发布日期">
                        <el-col :span="11">
                            <div class="block">
                                <el-date-picker v-model="coupon.couponStartDate" type="datetime" placeholder="选择日期时间">
                                </el-date-picker>
                            </div>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="有效期">
                        <div class="block">
                            <el-date-picker v-model="coupon.couponEndDate" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onEditSumbit">提交</el-button>
                        <el-button @click="close" style="margin-left: 120px;">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
    <!--引用vue-->
    <script src="../../js/untils/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../js/untils/axios-0.18.0.js"></script>
    <!--vue-->
    <script>
        new Vue({
            el: "#app",
            // 数据
            data() {
                return {
                    tableData: [], // 优惠券列表记录、
                    currentPage: 1, // 当前页
                    pageSize: 3, // 每页几条记录77
                    isShowIdentity: false, // 是否展示身份选择器
                    isShowAddForm: false, // 是否展示添加展示框
                    isShowEditForm: false, // 是否展示修改展示框

                    coupon: {
                        // couponStatusNo: '',
                        couponNo: '',
                        couponName: '',
                        couponPrice: 0.0,
                        couponFullPrice: 0.0,
                        couponDiscount: 0.0,
                        stock: 0,
                        publishTotal: 0,
                        couponStartDate: '',
                        couponEndDate: '',
                        couponSnapupStatus: 0, // 默认值0未抢购
                        couponAttention: "该优惠券请在有效期内使用，不可以叠加使用...",
                        couponPublish: 0, // 发布方
                        couponStatusNo: 0, // 适用方编号
                    },

                    // 身份
                    identity: [{
                        value: '0',
                        label: '平台',
                        disabled: false
                    }, {
                        value: '1',
                        label: '商家',
                        disabled: false,
                    }],
                    value: '', // 身份

                    condition1: '', // 条件1 优惠券名称
                    condition2: '', // 条件2 优惠券编号
                    condition3: '', // 条件3 优惠券适用方编号

                    ////////////////////////////////////////////////////////////////////
                    socket: "",

                    ///////////
                    user:{
                        userAdmin:'', // 账号
                        hotelNo:'', // 酒店编号
                        userPower: '', // 权限
                    },
                    // 展示的页码
                    currentPage: 1,//默认当前展示的是第1页
                    // currentPage:1, // 当前页
                    pageSize: 6, // 每页展示
                    couponTotal:0, // 总记录数
                }
            },

            // 方法
            methods: {
                // ////////////////////////////////////////////////////////////////////////////////////////////////
                // websocket
                init() {
                    if (typeof (WebSocket) === "undefined") alert("您的浏览器不支持websocket")
                    else {
                        // debugger
                        //模拟产生clientID
                        let clientID = Math.ceil(Math.random() * 100);
                        // 实例化socket

                        this.socket = new WebSocket("ws://localhost:8080/testWebSocket/" + clientID)

                        // this.socket = new WebSocket("ws://192.168.186.242:8084/testWebSocket/" + clientID)

                        this.socket = new WebSocket("ws://localhost:8080/testWebSocket/" + clientID)

                        // this.socket = new WebSocket("ws://192.168.186.248:8080/testWebSocket/" + clientID)

                        // 监听socket连接
                        this.socket.onopen = this.open
                        // 监听socket错误信息
                        this.socket.onerror = this.error
                        // 监听socket消息
                        this.socket.onmessage = this.getMessage
                    }
                },

                open: function () {
                    console.log("socket连接成功")
                },
                error: function () {
                    console.log("连接错误")
                },
                getMessage: function (msg) {
                    console.log(msg.data)
                },
                send: function () {
                    this.socket.send(params)
                },
                close: function () {
                    console.log("socket已经关闭")
                },

                // /////////////////////////////////////////////////////////////////////////////////////////////////

                // 分页
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    var that = this   //异步请求
                    that.pageSize = val  //当前的页码容量
                    console.log(that.pageSize)
                    that.getBypage() // 调用分页查询
                    console.log(that.getBypage())
                },
                handleCurrentChange(val) {
                    // debugger
                    console.log(`当前页: ${val}`);
                    // var that = this
                    this.currentPage = val //当前页
                    console.log(this.currentPage) 
                    this.getBypage() // 调用分页查询
                    // console.log(that.getBypage())
                },
                // 分页查询
                getBypage(){
                    // debugger
                    var that =this //异步请求
                    // console.log("当前页 ：" +that.currentPage + "  " + "当前页数的容量 ：" +that.pageSize )
                    axios({
                        method:'get',//请求方式
                        url:'http://localhost:8080/couponStock/selectByPage'+ "?currentPage=" + that.currentPage + "&pageSize=" + this.pageSize,//请求路径
                    }).then(function(resp){
                        console.log(resp.data.data.records)
                        // that.tableData = resp.data.data.records
                        that.couponTotal=resp.data.data.total    //总的记录数
                        var arr=resp.data.data.records   //接收到的数据
                        that.tableData=arr   //赋值给前端接收优惠券的数组
                    })
                },


                // 获取优惠券列表
                getAll() {
                    var that = this;
                    axios({
                        method: "get",
                        url: "http://localhost:8080/couponStock/getAll"
                    }).then(function (resp) {
                        // console.log(resp.data.data.length)
                        // debugger
                        var array = resp.data.data
                        // for(let i = 0;i < array.length;i++) {
                        //     array[i].couponStartDate = Date.parse(array[i].couponStartDate)
                        // }
                        that.tableData = array
                    })
                },

                // 添加按钮
                submit() {
                    if (this.isShowIdentity) this.isShowIdentity = false;
                    else this.isShowIdentity = true
                },

                // 身份选择器开关
                identitySubmit() {
                    this.isShowIdentity = false
                    if (this.value == '1') this.coupon.couponName = "满减券"
                    else this.coupon.couponName = "折扣券"
                    this.isShowAddForm = true
                },

                // 发布提交
                onSubmit() {
                    var that = this
                    that.coupon.couponPublish = Number(that.value)
                    that.coupon.couponStatusNo = that.user.hotelNo
                    console.log(that.coupon);
                    axios({
                        method: "post",
                        url: "http://localhost:8080/couponStock/publishCoupon",
                        data: that.coupon
                    }).then(function (resp) {
                        console.log(resp)
                        // 没次添加玩都要刷新
                        that.getAll()
                    })
                    that.isShowAddForm = false
                },

                // 修改提交
                onEditSumbit() {
                    var that = this
                    axios({
                        method: "put",
                        url: "http://localhost:8080/couponStock/updateCoupon",
                        data: that.coupon
                    }).then(function (resp) {
                        that.getAll()
                    })
                },

                // 关闭form弹窗
                close() {
                    this.isShowAddForm = false
                    this.isShowEditForm = false
                    this.value = '请选择身份'
                },

                // 模糊查询
                search() {
                    var that = this
                    axios({
                        method: "get",
                        url: "http://localhost:8080/couponStock/getListByCondition" + "?couponName=" +
                            that.condition1 + "&couponNo=" + that.condition2 + "&couponStatusNo=" + that
                            .condition3
                    }).then(function (resp) {
                        that.tableData = resp.data.data
                    })
                },

                // 删除
                deleteBtn(row) {
                    var that = this
                    console.log(row.couponNo)
                    axios({
                        method: "delete",
                        url: "http://localhost:8080/couponStock/deleteByCouponNo" + "?couponNo=" + row
                            .couponNo
                    }).then(function (resp) {
                        that.getAll()
                    })
                },

                // 修改
                editBtn(row) {
                    var that = this
                    that.coupon = row
                    that.isShowEditForm = true
                },

                // 重置
                reset() {
                    var that = this
                    that.getAll()
                },

                // 客服
                ServiceBtn(){
                    var that = this
                    // debugger
                    console.log("酒店编号："+that.user.hotelNo)
                    window.location.href='../coupon/customer_service/chatting.html?userAdmin='+ that.user.hotelNo
                },

                // 跳转到客服页面
                // skipToCustomerServer() {
                //     var that = this
                //     // window.location.href = "../customer_service/chatting.html?userAdmin=" + that.user.hotelNo
                //     window.location.href = "customer_service/chatting.html?userAdmin=" + that.user.hotelNo
                // }
            },

            // 钩子函数
            created() {
               
            },

            // 一般在初始化页面完成后,再对dom节点进行相关操作
            mounted() {
                var url = decodeURI(window.location.href)
                var userAdmin = url.split("?userAdmin")[1]
                console.log("账号:"+userAdmin)
                // debugger
                var temp = JSON.parse(window.localStorage.getItem(userAdmin))
                this.user.userAdmin = temp.userAdmin
                this.user.userPower = temp.userPower
                this.user.hotelNo = temp.hotelNo
                // debugger
                for(let i = 0;i < this.identity.length;i++) {
                    if (Number(this.identity[i].value) != temp.userPower) this.identity[i].disabled = true
                }

                console.log(this.user)
                // 初始化
                this.init()
                //分页
                this.getBypage()
                // 查询所有
                this.getAll()

            },


            // 销毁
            destroyed() {
                // 销毁监听
                this.socket.onclose = this.close
            },

        })
    </script>
</body>

</html>